<template>
	<div>
		<el-row :gutter="100">
			<el-col :span="24" style="border-right: 1px solid #f2f2f2;">
				<el-empty v-if="userPayrollList.prop.length==0" description="暂无数据"></el-empty>
				<el-collapse v-else v-model="collapsesfindex" class="collapseclass">
					<el-collapse-item v-for="(item,index) in userPayrollList.prop"
						:title="'项目名称: '+ getProjectMessage(item.ProjectId,'project')" :name="index">
						<div v-if="item.formUsers.length>0">
							<div class="titlecontent">收方工资单</div>
							<el-table :data="item.formUsers" border show-summary :summary-method="getSummariesPayRol" @select="tableSelectEvent"
				@select-all="tableSelectEvent">
								<el-table-column label="收方单号" prop="JobCreateTime" align="center">
									<template slot-scope="scope">
										{{ getProjectMessage(scope.row.FormId,'payrollForm') }}
									</template>
								</el-table-column>
								<el-table-column label="开始时间" prop="JobCreateTime" align="center"></el-table-column>
								<el-table-column label="结束时间" prop="JobEndTime" align="center"></el-table-column>
								<el-table-column label="工作描述" prop="JobContent" align="center"></el-table-column>
								<el-table-column label="工天" prop="WorkingDays" align="center"></el-table-column>
								<el-table-column label="单价" prop="Price" align="center"></el-table-column>
								<el-table-column label="总计" prop="TotalPrice" align="center"></el-table-column>
								<el-table-column label="备注" prop="Remarks" align="center"></el-table-column>
							</el-table>
						</div>

						<div v-if="item.reimRule.length>0">
							<div class="titlecontent">报销单</div>
							<el-table :data="item.reimRule" border show-summary :summary-method="getSummariesApply" @select="tableSelectEvent"
				@select-all="tableSelectEvent">
								<el-table-column label="报销单号" prop="ReimNumber" align="center">
									<template slot-scope="scope">
										{{ getProjectMessage(scope.row.FinanceReimbursementId,'reimRule') }}
									</template>
								</el-table-column>
								<el-table-column label="报销凭证" prop="ReimRuleCertificate" align="center"></el-table-column>
								<el-table-column label="报销内容" prop="ReimRuleContent" align="center"></el-table-column>
								<el-table-column label="金额(元)" prop="ReimRuleMoney" align="center"></el-table-column>
							</el-table>
						</div>
						<!-- 						<el-descriptions title="详细信息">
							<el-descriptions-item
								label="施工类别">{{ getDataMessage('ConstructionType',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="施工部位">{{ getDataMessage('ConstructionPart',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="工作内容">{{ getDataMessage('JobContent',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="责任人">{{ getDataMessage('User',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="方量(平方数量)">{{ item.payrollForm.Squarequantity }}</el-descriptions-item>
							<el-descriptions-item label="单价">{{ item.payrollForm.Price }}</el-descriptions-item>
							<el-descriptions-item label="详情" :span="3" :contentStyle="{ 'width':'calc(100% - 42px)' }"
								:labelStyle="{ 'width':'42px' }">
								<el-table :data="item.formUsers" border>
									<el-table-column label="姓名" prop="JobCreateTime" align="center">
										<template slot-scope="scope">
											{{ getDataMessage('UserYG',scope.row) }}
										</template>
									</el-table-column>
									<el-table-column label="开始时间" prop="JobCreateTime" align="center"></el-table-column>
									<el-table-column label="结束时间" prop="JobEndTime" align="center"></el-table-column>
									<el-table-column label="工作描述" prop="JobContent" align="center"></el-table-column>
									<el-table-column label="工天" prop="WorkingDays" align="center"></el-table-column>
									<el-table-column label="单价" prop="Price" align="center"></el-table-column>
									<el-table-column label="总计" prop="TotalPrice" align="center"></el-table-column>
									<el-table-column label="备注" prop="Remarks" align="center"></el-table-column>
								</el-table>
							</el-descriptions-item>
						</el-descriptions> -->
					</el-collapse-item>
				</el-collapse>
			</el-col>
			<!-- 			<el-col :span="12"  style="border-left: 1px solid #f2f2f2;">
				<el-collapse v-model="collapseshifaindex">
					<el-collapse-item v-for="(item,index) in shifaList" :title="item.payrollForm.PayrollNumber"
						:name="index">
						<el-descriptions title="详细信息">
							<el-descriptions-item
								label="施工类别">{{ getDataMessage('ConstructionType',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="施工部位">{{ getDataMessage('ConstructionPart',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="工作内容">{{ getDataMessage('JobContent',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="责任人">{{ getDataMessage('User',item.payrollForm) }}</el-descriptions-item>
							<el-descriptions-item
								label="方量(平方数量)">{{ item.payrollForm.Squarequantity }}</el-descriptions-item>
							<el-descriptions-item label="单价">{{ item.payrollForm.Price }}</el-descriptions-item>
							<el-descriptions-item label="详情" :span="3" :contentStyle="{ 'width':'calc(100% - 42px)' }"
								:labelStyle="{ 'width':'42px' }">
								<el-table :data="item.formUsers" border>
									<el-table-column label="姓名" prop="JobCreateTime" align="center">
										<template slot-scope="scope">
											{{ getDataMessage('UserYG',scope.row) }}
										</template>
									</el-table-column>
									<el-table-column label="开始时间" prop="JobCreateTime" align="center"></el-table-column>
									<el-table-column label="结束时间" prop="JobEndTime" align="center"></el-table-column>
									<el-table-column label="工作描述" prop="JobContent" align="center"></el-table-column>
									<el-table-column label="工天" prop="WorkingDays" align="center"></el-table-column>
									<el-table-column label="单价" prop="Price" align="center"></el-table-column>
									<el-table-column label="总计" prop="TotalPrice" align="center"></el-table-column>
									<el-table-column label="备注" prop="Remarks" align="center"></el-table-column>
								</el-table>
							</el-descriptions-item>
						</el-descriptions>
					</el-collapse-item>
				</el-collapse>
			</el-col> -->
		</el-row>
	</div>
</template>

<script>
	import * as publicjs from "../../../public/Scriput/Public";
	import dayjs from 'dayjs'
	export default {
		props: {
			parameter: {
				type: Object,
				required: true
			},
			FormuserInfo: {
				type: Array,
				required: true
			},
			ReimRuleInfo: {
				type: Array,
				required: true
			},
		},
		watch: {
			parameter: {
				handler(value) {
					//this.GetPayrollInfo(value)
					this.FormuserInfoHandler()
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				collapsesfindex: 0,
				collapseshifaindex: 0,
				FincanceDetails: [],
				shoufangList: [],
				shifaList: [],
				constructionPart: [],
				constructionType: [],
				payrollFormConstructionType: [],
				userPayrollList: {
					LivingexpensesInfoList: [],
					prop: [],
				},
				AllProject: [],
				PayrollFormList: [],
				ReimRuleList:[],
			}
		},
		created() {
			publicjs.http(this.$http, this.$message)
			this.AllProject = publicjs.GetAllProject(this.$http)
			this.GetPayrollFormHandler()
			this.GetReimNumberHandler()
		},
		mounted() {
			this.getConstructionPartEnum()
			this.getConstructionType()
			this.getPayrollFormConstructionType()
		},
		methods: {
			//获取详情
			GetPayrollInfo(value) {
				this.$http.post('FinanceManagement/SelFinanceManagementByUserId', {
					userId: value.userId
				}).then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) {
						this.userPayrollList = Data
					} else {
						this.$message.warning('获取详情失败,请重试!')
					}
				})
			},
			//获取数据描述
			getDataMessage(type, row) {
				const {
					ConstructionPart,
					ConstructionType,
					JobContent,
					PersonId
				} = row || null
				let messaga = ''
				let Obj
				switch (type) {
					case 'constructionPart':
						Obj = this.ConstructionPart.find(x => x.Value == ConstructionPart)
						break;
					case 'ConstructionType':
						Obj = this.constructionType.find(x => x.Value == ConstructionType)
						break;
					case 'JobContent':
						Obj = this.payrollFormConstructionType.find(x => x.Value == JobContent)
						break;
					case 'User':
						Obj = this.$store.state.AllUsers.find(x => x.Id == PersonId)
						break;
					case 'UserYG':
						Obj = this.$store.state.AllUsers.find(x => x.Id == this.parameter.userId)
						break;
				}
				if (Obj) {
					if (type != 'User' && type != 'UserYG') messaga = Obj.Description
					else messaga = Obj.UserName
				}
				return messaga
			},
			// 获取施工部位
			getConstructionPartEnum() {
				this.$http.post('PayrollForm/GetConstructionPartEnum').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.constructionPart = Data
					else this.constructionPart = []
				})
			},
			// 获取施工类别
			getConstructionType() {
				this.$http.post('PayrollForm/GetConstructionType').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.constructionType = Data
					else this.constructionType = []
				})
			},
			// 获取工作内容
			getPayrollFormConstructionType() {
				this.$http.post('PayrollForm/GetPayrollFormConstructionType').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.payrollFormConstructionType = Data
					else this.payrollFormConstructionType = []
				})
			},
			//返回名称
			getProjectMessage(id, type) {
				let message = ''
				switch (type) {
					case 'project':
						let project = this.AllProject.find(x => x.Id == id)
						message = project.ProjectName
						break;
					case 'payrollForm':
						let payroll = this.PayrollFormList.find(x => x.Id == id)
						message = payroll.PayrollNumber
						break;
					case 'reimRule':
						let reimRule = this.ReimRuleList.find(x => x.Id == id)
						message = reimRule.ReimNumber
						break;
				}
				return message
			},
			//获取收方工资单编号数据
			GetPayrollFormHandler() {
				this.$http.post('FinanceManagement/GetPayrollForm').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.PayrollFormList = Data
					else this.PayrollFormList = []
				})
			},
			//获取报销单的单据编号信息
			GetReimNumberHandler() {
				this.$http.post('FinanceManagement/GetReimNumber').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.ReimRuleList = Data
					else this.ReimRuleList = []
				})
			},
			//收方单表格数据合集
			getSummariesPayRol(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if(index == 4||index == 6){
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									let sum =  parseFloat(prev)  + parseFloat(curr)
									return sum.toFixed(2);
								} else {
									return prev.toFixed(2);
								}
							}, 0);
							sums[index] += index!=4?' 元':'天';
						} else {
							sums[index] = '';
						}						
					}
				});
				return sums;
			},
			//报销单表格数据合集
			getSummariesApply(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if(index == 3){
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									let sum =  parseFloat(prev)  + parseFloat(curr)
									return sum.toFixed(2);
								} else {
									return prev.toFixed(2);
								}
							}, 0);
							sums[index] += index!=4?' 元':'天';
						} else {
							sums[index] = '';
						}						
					}
				});
				return sums;
			},
			//数据处理
			FormuserInfoHandler() {
				this.userPayrollList.prop = []
				let peoject_1 = this.FormuserInfo.map(x=>{ return x.ProjectId }) 
				let peoject_2 = this.ReimRuleInfo.map(x=>{ return x.ProjectId })
				let result = Array.from(new Set([...peoject_1,...peoject_2]))
				result.forEach(x=>{
					this.userPayrollList.prop.push({
						ProjectId: x,
						formUsers: this.FormuserInfo.filter(fu=>fu.ProjectId == x),
						reimRule: this.ReimRuleInfo.filter(rr=>rr.ProjectId == x),
					})
				})
			}
		},
	}
</script>

<style scoped>
	.titlecontent {
		text-align: center;
		border-top: 1px solid #EBEEF5;
		border-left: 1px solid #EBEEF5;
		border-right: 1px solid #EBEEF5;
		font-size: 15px;
		font-weight: bold;
		padding: 5px 0px;
	}

	.collapseclass .el-collapse-item__header {
		font-size: 18px !important;
		font-weight: bold !important;
	}
</style>